import { Button, Tag, Image, Switch, Table } from 'antd'
import React, { useRef, useState } from 'react'

import * as XLSX from 'xlsx'

export default function Index() {

    const inpRef = useRef()
    const [proList, setproList] = useState([])

    function changeFile(e) {
        // 获取选中的文件
        // console.log(e.target.files);

        // 1. 获取选中的文件
        const file = e.target.files[0]

        // 2. 创建一个文件的加载器
        const reader = new FileReader()

        // 3. 将文件读取成数据流
        reader.readAsArrayBuffer(file)

        // 4. 文件读取成功之后的回调函数
        reader.onload = () => {
            // console.log(reader.result);

            // 5. 将数据流转换成 js 对象
            const box = XLSX.read(reader.result, { type: 'buffer' })

            // 6. 取出我们需要的工作表数据
            let res = box.Sheets['工作表1']

            // 7. 将工作表中的内容转换成 json 对象，然后再页面中渲染
            res = XLSX.utils.sheet_to_json(res)

            // console.log(res);
            setproList(res)
        }

    }


    const [current, setcurrent] = useState(1)
    const columns = [{
        title: '序号',
        render(t, r, i) {
            return <Tag>{(current - 1) * 10 + i + 1}</Tag>
        },
        width: 80
    }, {
        title: '商品名称',
        dataIndex: 'proname',
        width: 300
    }, {
        title: '商品图片',
        dataIndex: 'img1',
        width: 150,
        render(t) {
            return <Image src={t} width={80} />
        }
    }, {
        title: '商品分类',
        dataIndex: 'category',
    }, {
        title: '商品价格',
        dataIndex: 'originprice',
        sorter: (a, b) => a.originprice - b.originprice,
    }, {
        title: '商品折扣',
        dataIndex: 'discount',
        sorter: (a, b) => a.discount - b.discount,
    }, {
        title: '是否推荐',
        dataIndex: 'isrecommend',
        render(t, r) {
            return <Switch defaultChecked={t} />
        }
    }, {
        title: '是否售卖',
        dataIndex: 'issale',
        render(t) {
            return <Switch defaultChecked={t} />
        }
    }, {
        title: '是否秒杀',
        dataIndex: 'isseckill',
        render(t) {
            return <Switch defaultChecked={t} />
        }
    }
    ]


    return (
        <div>
            <h3>
                文件导入
                <input ref={inpRef} onChange={changeFile} hidden type='file' />
                <Button onClick={() => { inpRef.current.click() }}>选择文件</Button>
            </h3>


            <Table
                rowKey={'proid'}
                dataSource={proList}
                pagination={{
                    current,
                    onChange(page) {
                        setcurrent(page)
                    }
                }}
                columns={columns}
                scroll={{
                    y: 450
                }}
                locale={{
                    triggerDesc: '点击降序',
                    triggerAsc: '点击升序',
                    cancelSort: '取消排序',
                    filterConfirm: '确定',
                    filterReset: '重置',
                }}
            />
        </div>
    )
}
